<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app" class="container mt-5">
        <div class="row justify-content-sm-center">
            <div class="col-sm-6 alert alert-secondary">
                <div class="form-group">
                    <label>产品名称:</label>
                    <input class="form-control" type="text" placeholder="请输入产品名称" v-model="product.name">
                </div>
                <div class="form-group">
                    <label>产品价格:</label>
                    <input class="form-control" type="number" placeholder="请输入产品价格" v-model.number="product.price">
                </div>
                <div class="form-group">
                    <label>购买数量:</label>
                    <input class="form-control" type="number" placeholder="购买数量" v-model.number="product.count">
                </div>
                <button class="btn btn-info btn-block btn-sm" type="button" @click="addProduct()">添加</button>
            </div>
        </div>
        <div class="row justify-content-sm-center">
            <div class="col-sm-12 alert alert-secondary">
                <table class="table table-bordered" style="background-color: white;">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col" style="width: 5%;">
                                <input type="checkbox" v-model="all">
                            </th>
                            <th scope="col" style="width: 10%;">编号</th>
                            <th scope="col">产品名称</th>
                            <th scope="col">产品单价</th>
                            <th scope="col" style="width: 150px;">购买数量</th>
                            <th scope="col" style="width: 15%;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-show="productList.length==0">
                            <th colspan="6" class="text-center align-middle">空空如也</th>
                        </tr>
                        <tr v-for="(p, i) in productList" :key="i">
                            <th class="align-middle">
                                <input type="checkbox" v-model="p.state">
                            </th>
                            <td class="align-middle">{{ i+1 }}</td>
                            <td class="align-middle">{{ p.name }}</td>
                            <td class="align-middle">￥{{ p.price }}</td>
                            <td>
                                <div class="input-group input-group-sm" style="width: 150px;">
                                    <div class="input-group-prepend"  @click="setItemCount(i,-1)">
                                        <span class="input-group-text" style="background-color: white;">-</span>
                                    </div>
                                    <input type="text" class="form-control text-center" readonly :value="p.count">
                                    <div class="input-group-append" @click="setItemCount(i,1)">
                                        <span class="input-group-text" style="background-color: white;">+</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm" @click="removeItem(i)">删除</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="2" class="align-middle">总计：</th>
                            <td colspan="2" class="text-center align-middle">
                                被选中 <span style="color: red;">{{ result.num }}</span> 个 ,
                                总价 <span style="color: red;">{{ result.price }}</span> 元
                            </td>
                            <td colspan="2">
                                <button type="button" class="btn btn-danger btn-sm" @click="removeChooseItem()">删除选中项</button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            product:{
                name:"",
                price:"",
                count:"",
                state:false
            },
            productList:[
                {name:"华为手机",price:5000,count:1,state:false},
                {name:"小米手机",price:5000,count:1,state:false}
            ]
        },
        computed:{
            all:{
                get(){
                    let flag = false;
                    if(this.productList.length>0){
                        flag =  this.productList.every(p=>p.state);
                    }
                    return flag;
                },
                set(nv){
                    this.productList.forEach(p=>p.state=nv);
                }
            },
            result(){
                let result = {
                    num:0,
                    price:0
                }
                for (let p of this.productList) {
                    if(p.state){
                        result.num++;
                        result.price += p.price*p.count
                    }
                }
                return result;
            }
        },
        methods: {
            removeItem(i){
                this.productList.splice(i,1);
            },
            setItemCount(i,sub){
                let newCount = this.productList[i].count + sub;
                if(newCount<=0){
                    let flag = confirm("确认删除商品吗？");
                    if(flag){
                        this.removeItem(i)
                    };
                }else{
                    this.productList[i].count = newCount;
                }
            },
            addProduct(){
                this.productList.push(this.product);
                this.product = {};
            },
            removeChooseItem(){
                if(this.all){
                    this.productList = [];
                    this.all = false;
                    return;
                }
                for (let i = this.productList.length-1 ; i>=0; i--) {
                    if(this.productList[i].state){
                        this.productList.splice(i,1)
                    }
                }
            }
        }
    })
</script>

</html>